<template>
  <nav :class="isCollapse?'w64':'w240'" >
    <div class="sidebar-menu">
      <el-menu  :default-active="$route.path" :unique-opened=true router  @open="handleOpen" @close="handleClose" :collapse='isCollapse'
        v-for="(item, index) in menuItem" :key="index" >
        <el-menu-item v-if="typeof item.child === 'undefined'" :index="item.path">
          <i class="icon" :class="item.icon"></i>
          <span slot="title">{{ item.title }}</span>
        </el-menu-item>
        <el-submenu v-else :index="item.path">
          <template slot="title">
            <i class="icon" :class="item.icon"></i>
            <span slot="title">{{ item.title }}</span>
          </template>
          <el-menu-item v-for="(child_item, child_index) in item.child" :index="child_item.path" :key="child_index"> 
            <i class="icon" :class="item.icon"></i>
            <span slot="title">{{ child_item.title }}</span>
          </el-menu-item>
        </el-submenu>
      </el-menu>
    </div>
  </nav>
</template>
<script>
import bus from '../../bus.js';
export default {
    data() {
    return {
      menuItem: [
        {
          title: '首页',
          path: '/home',
          icon: 'el-icon-s-home'
        },
        {
          title: '部门与职位',
          path: '/tables',
          icon: 'el-icon-menu',
          child: [
            {
              title: '部门管理',
              path: '/tables/department'
            },{
              title: '职位管理',
              path: '/tables/position'
            }
          ]
        },
        {
          title: '员工管理',
          path: '/tables',
          icon: 'el-icon-menu',
          child: [
            {
              title: '员工薪资管理',
              path: '/tables/salary'
            },{
              title: '员工信息管理',
              path: '/tables/information'
            }
          ]
        },
      ],
      isCollapse: false
    }
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath)
    },
  },
  computed: {
      onRoutes() {
          return this.$route.path.replace('/', '');
      }
  },
  created() {
    // 通过 Event Bus 进行组件间通信，来折叠侧边栏
    bus.$on('isCollapse', msg => {
        this.isCollapse = msg;
        bus.$emit('collapse-content', msg);
    });
  }
}
</script>
<style scoped>
nav {
    height: 100%;
}
.sidebar-menu {
  background-color: #eef1f6;
  height: 100%;
}
.el-menu{
  background-color: #eef1f6;
}
.w240{
  width: 240px;
}
.w64{
  width: 64px;
}
.el-menu-item{
  text-align: center;
}
</style>